<template>
  <div class="quan">
    <div class="he">
      <div class="hehe">
        <div style="width:1495px;height: 30px;padding-top: 10px">
          <span>小米商城</span><span>MUI</span><span>云服务</span><span>协议规则</span>
        <span style="margin-left: 1100px;" @click="dl">登录</span>
        </div>
        <div style="width:100px;height: 50px;margin-left: 1500px;margin-top: -40px;;">
          <el-button style="width:100px;height: 50px;" class="el-icon-shopping-cart-2" type="warning" @click="cha">购物车</el-button>
        </div>
      </div>
    </div>
    <div class="sjj">
      <el-row>
        <p></p>
        <br />
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="sjjll" @click="hh">
            <p class="el-icon-s-home"></p>
          </div>
        </el-col>
        <el-col :span="2">
          <p>小米手机</p>
        </el-col>
        <el-col :span="2">
          <p>RedMi红米</p>
        </el-col>
        <el-col :span="2">
          <p>电视</p>
        </el-col>
        <el-col :span="4" class="sjjcha">
          <el-input placeholder="请输入内容" v-model="gname">
            <template slot="append">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="show"
              ></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="sj">
      <div class="head">
        <h3 style="text-align: left">手机</h3>
      </div>
      <div class="xia">
        <div
          class="xiazuo"
          v-for="(items, index) in showData2"
          :key="index"
          @click="zhuan(items)"
        >
          <img :src="items.GImg" alt="" width="100%" height="100%" />
        </div>
        <div class="xiayou">
          <div class="xi" v-for="(item, index) in showData" :key="index">
            <p>新品</p>
            <img :src="item.GImg" width="80%" height="200px" />
            <p class="name">{{ item.GName }}</p>
            <p class="remark">{{ item.GRemark }}</p>
            <p class="price" @click="tiao(item.GId)">
              {{ item.GPrice }}元 <span class="el-icon-shopping-cart-2"></span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>商品添加成功！</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cha" class="butzhuan">查看购物车</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showData: [],
      gname: "",
      pageindex: 1,
      pagesize: 8,
      totalcount: 0,
      showData2: [],
      pageindex2: 1,
      pagesize2: 1,
      totalcount2: 0,
      addData: {
        GId: "",
        UId: "",
        SNum: 1,
      },
      dialogVisible: false,
    };
  },
  methods: {
    show() {
      this.$axios
        .get("http://localhost:20338/api/XiaoMi/Show", {
          params: {
            pageindex: this.pageindex,
            pagesize: this.pagesize,
            gname: this.gname,
          },
        })
        .then((res) => {
          this.showData = res.data.list;
          this.totalcount = res.data.totalcount;
        });
    },

    show2() {
      this.$axios
        .get("http://localhost:20338/api/XiaoMi/Show", {
          params: {
            pageindex: this.pageindex2,
            pagesize: this.pagesize2,
            gname: this.gname,
          },
        })
        .then((res) => {
          this.showData2 = res.data.list;
          this.totalcount2 = res.data.totalcount;
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？");
      {
        done;
      }
    },
    tiao(id) {
      let userid = sessionStorage.getItem("userid");
      if (userid != null) {
        this.addData.GId = id;
        this.addData.UId = userid;
        this.$axios
          .post("http://localhost:20338/api/XiaoMi/Add", this.addData)
          .then((res) => {
            if (res.data > 0) {
              this.dialogVisible = true;
            } else {
              this.$message.error("添加失败");
            }
          });
      } else {
        this.$router.push("/login");
      }
    },
    // zhuan(item){
    //   this.$router.push("/about/"+item);
    // }
    zhuan(item) {
      this.$router.push({ path: "/about", query: item });
    },
    cha() {
      this.$router.push("/car");
    },
    hh() {
      this.$router.push("/");
    },
    dl(){
      this.$router.push("/login");
    }
  },
  created() {
    this.show();
    this.show2();
  },
};
</script>

<style scoped>
.hehecar{
  width: 80px;
  height: 50px;
  background-color: orange;
  
}
.hehe {
  width: 1600px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.he {
  width: 100%;
  height: 50px;
  background-color: black;
  margin: auto;
  color: #fff;
}
.sjjll {
  width: 50px;
  height: 50px;
  background-color: orange;
  
}
.sjjcha {
  margin-left: 650px;
}
.sjj {
  width: 1600px;
  margin: auto;
  height: 100px;
  background-color: #fff;
}
.sj {
  width: 1600px;
  margin: auto;
}
.head {
  width: 1600px;
  height: 80px;
  margin: auto;
  background-color: rgb(255, 245, 245);
}
.quan {
  background-color: rgb(245, 250, 255);
  width: 100%;
  height: 100%;
}
.xia {
  width: 1600px;
  margin: auto;
  background-color: rgb(255, 245, 245);
  height: 800px;
  float: left;
}
.xiazuo {
  width: 20%;
  text-align: left;
  height: 800px;
  float: left;
}
.xiayou {
  width: 78%;
  margin-left: 21%;
}
.xi {
  width: 300px;
  float: left;
  height: 400px;
  background-color: white;
  margin-left: 10px;
}
.name {
  font-weight: 900;
  font-size: 20px;
}
.remark {
  font-size: 20px;
  color: rgb(136, 135, 135);
}
.price {
  font-weight: 700;
  color: red;
}
.butzhuan {
  background-color: rgb(233, 151, 0);
  text-align: left;
}
</style>